import _ from "lodash";
import { LGraph, LGraphCanvas, LiteGraph } from "litegraph.js";
import "litegraph.js/css/litegraph.css";
import { Response } from "./nodes/nodejs/response/Response";
import { Router } from "./nodes/nodejs/router/Router";
import { ResponseError } from "./nodes/nodejs/response/ResponseError";
import { ResponseSuccess } from "./nodes/nodejs/response/ResponseSuccess";
import { CpcRunCode } from "./nodes/basic/CpcRunCode";
import { ObjectToString } from "./nodes/basic/ObjectToString";
import { ObjectToBool } from "./nodes/basic/ObjectToBool";
import { ObjectToNumber } from "./nodes/basic/ObjectToNumber";
import { ToObject } from "./nodes/basic/ToObject";
import { ObjectTo } from "./nodes/basic/ObjectTo";
import { CpcConsole } from "./nodes/basic/CpcConsole";
import { CpcAlert } from "./nodes/basic/CpcAlert";
import { IfElse } from "./nodes/basic/IfElse";
import { CpcString } from "./nodes/basic/CpcString";

const registerNodes: any = {
    "base/CpcAlert": CpcAlert,
    "base/CpcRunCode": CpcRunCode,
    "basic/CpcString": CpcString,
    "basic/CpcConsole": CpcConsole,
    "basic/ObjectToString": ObjectToString,
    "basic/ObjectToBool": ObjectToBool,
    "basic/ObjectToNumber": ObjectToNumber,
    "basic/ToObject": ToObject,
    "basic/ObjectTo": ObjectTo,
    "basic/IfElse": IfElse,
    "nodejs/Router": Router,
    "nodejs/Response": Response,
    "nodejs/ResponseError": ResponseError,
    "nodejs/ResponseSuccess": ResponseSuccess,
};
LiteGraph.clearRegisteredTypes();
Object.keys(registerNodes).forEach(key => LiteGraph.registerNodeType(key, registerNodes[key]));
export class CpcLitegraph {
    public graph: any;

    private domId: string;

    constructor(id: string, config: any, mock: any) {
        this.domId = id;
        this.onresize = this.onresize.bind(this);
        this.onresize();
        this.onresize = _.debounce(this.onresize);
        window.addEventListener("resize", this.onresize);
        this.init(config, mock);
    }

    private init(config: any, mock: any) {
        this.destroy();
        const graph = new LGraph(config);
        this.graph = graph;
        // eslint-disable-next-line no-new
        new LGraphCanvas(`#${this.domId}`, graph);
        // 没有，说明是初始化，就默认创建路由和响应
        if (!config) {
            const baseRouter: any = LiteGraph.createNode("nodejs/Router");
            baseRouter.properties = { preDatas: [mock] }; // 绑定mock
            baseRouter.pos = [100, 200];
            graph.add(baseRouter);
            const baseObjectTo: any = LiteGraph.createNode("basic/ObjectTo");
            baseObjectTo.pos = [300, 200];
            graph.add(baseObjectTo);
            baseRouter.connect(0, baseObjectTo, 0);
            baseRouter.connect(1, baseObjectTo, 1);
            const baseResponse = LiteGraph.createNode("nodejs/Response");
            baseResponse.pos = [700, 200];
            graph.add(baseResponse);
        }
        //   测试
        const baseResponse = LiteGraph.createNode("basic/ToObject");
        baseResponse.pos = [200, 400];
        graph.add(baseResponse);
    }

    private onresize() {
        const canvas: any = document.getElementById(this.domId);
        if (canvas) {
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
        }
    }

    public destroy() {
        if (this.graph) {
            window.removeEventListener("resize", this.onresize);
            this.graph.clear();
            this.graph = null;
        }
    }
}
